<template>
<div>
    <!-- Form -->
    <el-button type="NewlyBuild" @click="dialogFormVisible = true" v-if="_SHOWBTN(showBetCode)">编辑</el-button>
    <el-dialog title="编辑背景图及Banner" :visible.sync="dialogFormVisible" width="530px">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <!--输入框-->
            <el-form-item label=" 图片名称：" prop="name">
                <el-input v-model="ruleForm.name" placeholder="请输入图片名称"></el-input>
            </el-form-item>
            <!--下拉框-->
            <el-form-item label=" 图片位置：" prop="space">
                <el-select v-model="ruleForm.space" placeholder="请选择图片位置">
                    <el-option label="顶部背景图" value="BGPIC"></el-option>
                    <el-option label="上部banner" value="BANNER1"></el-option>
                    <el-option label="下部banner" value="BANNER2"></el-option>
                </el-select>
            </el-form-item>
            <!--本地图片选择-->
            <div class="pic-box">
                <h1 class="h1-1">选择图片：</h1>
                <!--
          <Upload :ruleForm.sync="ruleForm" ></Upload>-->
                <div class="upload-box">
                    <el-upload action list-type="picture-card" :file-list="fileList" :auto-upload="false" :before-upload="beforeAvatarUpload" :on-change="handleChange">
                        <i slot="default" class="el-icon-plus"></i>
                        <div slot="file" slot-scope="{file}">
                            <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
                            <span class="el-upload-list__item-actions">
                                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                    <i class="el-icon-zoom-in"></i>
                                </span>
                                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                    <i class="el-icon-delete"></i>
                                </span>
                            </span>
                        </div>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt />
                    </el-dialog>
                </div>
                <!--结束的地方-->
            </div>
            <!--图片提示文字及边框-->
            <div class="flex-box">
                <div class="pic-Tips">
                    <h3 class="pic-tips-every">1.请上传PNG、JPG或者JPEG图片，大小不超过10MB;</h3>
                    <div class="pic-tips-every">2.背景图尺寸约为1920*455；上部banner尺寸约为1200*120；中部banner尺寸约为372*90；底部banner尺寸约为180*52px；</div>
                </div>
            </div>

            <!--下拉框
        <el-form-item label=" 排序：" prop="region">
          <el-select v-model="ruleForm.sort" placeholder="1">
            <el-option label="1" value="1"></el-option>
            <el-option label="2" value="2"></el-option>
            <el-option label="3" value="3"></el-option>
            <el-option label="4" value="4"></el-option>
            <el-option label="5" value="5"></el-option>
          </el-select>
        </el-form-item>-->
            <el-form-item label=" 排序：" prop="sort">
                <el-input v-model="ruleForm.sort" placeholder="请输入序号"></el-input>
            </el-form-item>

            <!--下拉框-->
            <el-form-item label=" 状态：" prop="used">
                <el-select v-model="ruleForm.used" placeholder="请输入">
                    <el-option label="启用" :value="1"></el-option>
                    <el-option label="停用" :value="0"></el-option>
                </el-select>
            </el-form-item>
        </el-form>

        <!--文本框-->
        <div class="text-box">
            <h1 class="text-title">描述：</h1>
            <el-input type="textarea" placeholder="这里是图片描述" v-model="ruleForm.textarea200" maxlength="200" show-word-limit></el-input>
        </div>

        <!--结束-->
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="BuildNew('ruleForm')">确 定</el-button>
        </div>
    </el-dialog>
</div>
</template>

<script>
import Upload from "@/components/Upload/Upload.vue";
export default {
    components: {
        Upload,
    },
    data() {
        return {
            dialogImageUrl: "",
            //控制图片是否课件
            dialogVisible: false,
            //控制按钮是否课件
            disabled: false,
            fileList: [],
            dialogFormVisible: false,
            ruleForm: {
                name: "",
                space: "",
                sort: "",
                used: "",
                //文本框
                textarea200: "",
                picUrl: "",
            },
            rules: {
                name: [{
                        required: true,
                        message: "请输入图片名称",
                        trigger: "blur"
                    },
                    {
                        message: "长度在 3 到 5 个字符",
                        trigger: "blur"
                    },
                ],
                xing: [{
                    required: true,
                    message: "请输入",
                    trigger: "blur"
                }],
                space: [{
                    required: true,
                    message: "请输入",
                    trigger: "blur"
                }],
                sort: [{
                    required: true,
                    message: "请输入序号",
                    trigger: "blur"
                }],
                used: [{
                    required: true,
                    message: "请输入",
                    trigger: "blur"
                }],
                textarea200: [{
                    required: true,
                    message: "请输入",
                    trigger: "blur"
                }],
                picUrl: [{
                    required: true,
                    message: "请输入",
                    trigger: "blur"
                }],
                date1: [{
                    type: "date",
                    required: true,
                    message: "请选择日期",
                    trigger: "change",
                }, ],
                date2: [{
                    type: "date",
                    required: true,
                    message: "请选择时间",
                    trigger: "change",
                }, ],
                type: [{
                    type: "array",
                    required: true,
                    message: "请至少选择一个活动性质",
                    trigger: "change",
                }, ],
                resource: [{
                    required: true,
                    message: "请选择活动资源",
                    trigger: "change"
                }, ],
                desc: [{
                    required: true,
                    message: "请填写活动形式",
                    trigger: "blur"
                }],
            },
        };
    },
    computed: {
        //图片获取根路径
        baseUrl() {
            return this.$store.state.PortalManagement.fileIp;
        },
    },
    watch: {
        dialogFormVisible(newval, oldval) {
            this.getone();
        }
    },
    props: ["id", "getBannerList", "showBetCode"],
    created() {
        this.getone();
    },
    methods: {
        //图片上传的方法
        handleChange(file, fileList) {
            const isLt2M = file.size / 1200 / 1024 < 10;
            var FileExt = file.name.replace(/.+\./, "");
            if (!isLt2M) {
                this.$message.error("上传头像图片大小需小于10MB");
                this.fileList = []

            } else if (["jpg", "png", "jpeg"].indexOf(FileExt.toLowerCase()) === -1) {
                this.$message.error("请上传后缀名为jpg、png、jpeg的图片！");
                this.fileList = []
            } else {
                // console.log(file, fileList);
                const formData = new FormData();
                //在file里面追加一个对象
                formData.append("file", file.raw);
                // console.log(formData,111)
                this.Api.uploadImage(formData).then((res) => {
                    // var data = { ...this.ruleForm, picUrl: res.data.url };
                    // console.log(data, 111);
                    // this.$emit("update:ruleForm", data);
                    this.$set(this.ruleForm, "picUrl", res.data.url);
                });
            }

        },
        handleRemove(file) {
            this.fileList = [];
            this.ruleForm.picUrl = "";
            // console.log(file);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        //图片上传限定图片类型
        beforeAvatarUpload(file) {
            const isJPG = file.type === "png/jpeg/jpg";
            const isLt2M = file.size / 180 / 52 < 2;

            if (!isJPG) {
                this.$message.error("上传头像图片只能是png/jpeg/jpg格式!");
            }
            if (!isLt2M) {
                this.$message.error("上传头像图片大小约为180*52!");
            }
            return isJPG && isLt2M;
        },
        //请求
        getone() {
            this.Api.getBannerOne({
                id: this.id
            }).then((res) => {
                if (res.code === "0") {
                    // console.log(res, 1121)
                    // console.log("编辑按钮是否再次出发")
                    this.ruleForm = {};
                    this.ruleForm = {
                        name: res.data.picName,
                        space: res.data.picCode,
                        sort: res.data.sort,
                        used: res.data.userd,
                        //文本框
                        textarea200: res.data.picDesc,
                        picUrl: res.data.picUrl,
                    };
                    this.fileList = [{
                        url: this.$store.state.PortalManagement.fileIp + res.data.picUrl,
                    }, ];
                }
            });
        },
        //按钮点击事件确认
        BuildNew(formName) {
            // console.log(this.ruleForm.picUrl,"day")
            //   this.dialogFormVisible = false;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.Api.getBannerBianji({
                        id: this.id,
                        picCode: this.ruleForm.space,
                        picDesc: this.ruleForm.textarea200,
                        picName: this.ruleForm.name,
                        picUrl: this.ruleForm.picUrl,
                        sort: this.ruleForm.sort,
                        used: this.ruleForm.used,
                    }).then((res) => {
                        //   console.log(res,1111)
                        if (res.code === "0") {
                            // console.log(res,11111)
                            //   alert("submit!");
                            this.dialogFormVisible = false;
                            this.getBannerList();
                        }
                    });
                } else {
                    // console.log("error submit!!");
                    return false;
                }
            });
        },
    },
};
</script>

<style lang="less" scoped>
/deep/.el-button--NewlyBuild {
    width: 60px;
    height: 28px;
    background: rgba(61, 127, 255, 1);
    border-radius: 4px;
    color: white;
    padding: 0;
    margin-right: 20px !important;
}

/deep/.el-dialog__wrapper {
    z-index: 2091 !important;

    .el-dialog {
        .el-dialog__header {
            background: rgba(230, 233, 237, 1);
            border-radius: 8px 8px 0px 0px;
            border: 1px solid rgba(230, 233, 237, 1);
            padding: 11px 20px 11px 24px;

            .el-dialog__title {
                font-size: 18px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: rgba(51, 51, 51, 1);
                line-height: 24px;
            }

            .el-dialog__headerbtn {
                top: 15px;
            }
        }

        .el-dialog__body {
            padding: 30px 43px 0 42px;

            .el-form {
                .el-form-item {
                    margin: 0 0 16px 0;

                    .el-form-item__label {
                        width: 85px !important;
                        font-size: 14px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #333333;
                        padding: 0;
                    }

                    .el-form-item__content {
                        margin-left: 85px !important;

                        .el-input__inner {
                            width: 260px;
                            height: 36px;
                            background: rgba(255, 255, 255, 1);
                            border-radius: 4px;
                            border: 1px solid rgba(221, 221, 221, 1);
                            padding-left: 12px;
                        }
                    }
                }

                .pic-box {
                    display: flex;
                    padding-bottom: 10px;

                    .h1-1 {
                        width: 85px;
                        height: 22px;
                        font-size: 14px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #333333;
                        text-align: right;
                    }

                    .h1-1::before {
                        content: "* ";
                        color: #ff0000;
                    }
                }

                .flex-box {
                    display: flex;
                    justify-content: flex-end;

                    .pic-Tips {
                        width: 360px;
                        padding-top: 6px;
                        padding-bottom: 15px;
                        border-top: 1px solid #dddddd;

                        .pic-tips-every {
                            width: 360px;
                            font-size: 12px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: rgba(153, 153, 153, 1);
                            line-height: 22px;
                            white-space: normal;
                        }
                    }
                }
            }

            .text-box {
                display: flex;

                .text-title {
                    width: 105px;
                    height: 22px;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                    text-align: right;
                }

                .text-title::before {
                    // content: "* ";
                    color: #ff0000;
                }

                .el-textarea__inner {
                    min-height: 100px !important;
                    padding-left: 10px;
                }
            }
        }

        .el-dialog__footer {
            padding: 30px 30px 26px;

            .dialog-footer {
                .el-button--default {
                    width: 70px;
                    height: 36px;
                    background: rgba(255, 255, 255, 1);
                    border-radius: 3px;
                    border: 1px solid rgba(215, 219, 224, 1);
                    padding: 0;
                    color: rgba(51, 51, 51, 1);
                }

                .el-button--primary {
                    width: 70px;
                    height: 36px;
                    background: rgba(61, 127, 255, 1);
                    border-radius: 3px;
                    padding: 0;
                    color: rgba(255, 255, 255, 1);
                }
            }
        }
    }
}

/**图片上传大小修改88px */
/deep/.el-upload--picture-card {
    width: 88px;
    height: 88px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/deep/.el-upload-list__item {
    width: 88px;
    height: 88px;
    margin-right: 0px;
}

/deep/.el-icon-zoom-in {
    font-size: 19px;
}

/deep/.el-icon-download {
    font-size: 19px;
}

/deep/.el-icon-delete {
    font-size: 19px;
}

.upload-box {
    width: 88px;
    height: 88px;
    overflow: hidden;

    ul {
        li {
            div {
                >span {
                    display: flex;
                }
            }
        }
    }
}

//样式图片上传
/deep/.el-upload--picture-card {
    width: 66px;
    height: 66px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/deep/.el-upload-list__item {
    width: 66px;
    height: 66px;
    margin-right: 0px;
}

/deep/.el-icon-zoom-in {
    font-size: 10px;
}

/deep/.el-icon-delete {
    font-size: 10px;
}

.upload-box {
    width: 66px;
    height: 66px;
    overflow: hidden;

    ul {
        li {
            div {
                >span {
                    display: flex;
                }
            }
        }
    }
}

/deep/.el-upload-list__item-actions {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
